import React from 'react'
import { Button, Row, Col } from 'antd'
import FileViewer from 'components/file-viewer'
import image1 from 'images/component-lib/timg.jpg'
import image2 from 'images/component-lib/timg-1.jpg'
import image3 from 'images/component-lib/timg-2.jpg'

export default {
  key: 'file-viewer',
  name: 'FileViewer 文件预览',
  author: '张然',
  description: '用于显示文件列表，可预览基本的附件类型，包括图片pdf、word、excel、ppt、txt。',
  isExampleFull: false,
  api: [{
    title: 'API',
    data: [{
      param: 'visible', description: '控制是否显示。', type: 'boolean', defaultValue: 'false'
    },{
      param: 'attachments', description: '图片列表数组。', type: 'array', defaultValue: '-'
    },{
      param: 'onCancel', description: '点击右上角关闭按钮的回调。', type: 'function', defaultValue: '-'
    },{
      param: 'afterClose', description: '完全关闭后的回调。', type: 'function', defaultValue: '-'
    },{
      param: 'urlKey', description: '图片数组中图片对象的大图url字段名。', type: 'string', defaultValue: '-'
    },{
      param: 'thumbnailUrlKey', description: '图片数组中图片对象的缩略图url字段名。', type: 'string', defaultValue: '-'
    },{
      param: 'valueKey', description: '图片数组中图片对象的唯一标识字段名。', type: 'string', defaultValue: '-'
    },{
      param: 'defaultIndex', description: '打开后默认显示的图片序列。', type: 'number', defaultValue: '0'
    }],
    description: ''
  }],
  example: [
    {
      title: '基础用法',
      description: '点击按钮后展开。',
      state: {
        show: false,
        nowIndex: -1,
        imageList: [{
          id: 1,
          url: image1
        }, {
          id: 2,
          url: image2
        }, {
          id: 3,
          url: image3
        }]
      },
      getMethod: context => {
        return {
          handlePreview: index => {
            context.setState({ nowIndex: index, show: true })
          }
        }
      },
      getContent: context => {
        const { show, imageList } = context.state;
        return (
          <div>
            <Button onClick={() => context.handlePreview(0)} type="primary">查看图片</Button>
            <FileViewer
              visible={show}
              onCancel={() => context.setState({ show: false })}
              attachments={imageList}
              thumbnailUrlKey="url"
              urlKey="url"
              valueKey="id"/>
          </div>
        )
      }
    },
    {
      title: '图片列表',
      description: '一般用于图片列表的对应点击事件，通过设置::defaultIndex::可指定打开后默认显示的图片索引，外层图片列表需要在外部自己编写，但是可以与::ImageUpload::结合使用。',
      state: {
        show: false,
        nowIndex: -1,
        imageList: [{
          id: 1,
          url: image1
        }, {
          id: 2,
          url: image2
        }, {
          id: 3,
          url: image3
        }]
      },
      getMethod: context => {
        return {
          handlePreview: index => {
            context.setState({ nowIndex: index, show: true })
          }
        }
      },
      getContent: context => {
        const { show, imageList, nowIndex } = context.state;
        return (
          <div>
            <Row type="flex">
              {imageList.map((attachment, index) => (
                <Col style={{
                  width: 70,
                  height: 70,
                  padding: 5,
                  boxSizing: 'border-box',
                  boxShadow: '0 0 3px 1px #e9e9e9',
                  borderRadius: 5,
                  marginBottom: 20,
                  marginRight: 10,
                  cursor: 'pointer',
                  textAlign: 'center'
                }} key={index} onClick={() => context.handlePreview(index)}>
                  <img src={attachment.url} style={{
                    maxHeight: '100%',
                    maxWidth: '100%' }}/>
                </Col>
              ))}
            </Row>
            <FileViewer
              visible={show}
              onCancel={() => context.setState({ show: false })}
              attachments={imageList}
              thumbnailUrlKey="url"
              urlKey="url"
              valueKey="id"
              defaultIndex={nowIndex}
            />
          </div>
        )
      }
    }
  ]
}
